<template>
	<view class="city-selector-wrap" v-if="visibleRef" :style="{'--theme-color': themeColor}">
		<Navbar />
		<view class="city-selector-box" :class="visibleAni ? 'is-show' : ''">
			<view id="city-selector-filter-box" class="city-selector-filter-box" @touchmove.stop.prevent="handleMove">
				<view class="city-selector-search-box">
					<view class="city-selector-search-input"><input type="text" class="city-selector-search-input-inner"
							:placeholder="placeholder" @input="bindFilterKeyword" :value="filterKeyword"
							placeholder-class="-p" maxlength="20" /></view>
				</view>
				<!-- #ifndef H5 -->
				<view class="city-selector-local-box" v-if="showLocate">
					<view class="city-selector-local-info">
						<text class="city-selector-local-info-label">当前:</text>
						<text class="city-selector-local-info-cont">{{ localCity.cityName || '定位失败,重新定位' }}</text>
					</view>
					<view class="city-selector-local-button" @click="handleRepositioning()">
						<text class="city-selector-local-button-icon"></text>
						<text class="city-selector-local-button-text">重新定位</text>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<view class="city-selector-list-box" v-if="cityPageData.length > 0">
				<scroll-view class="city-selector-list-scroll" scroll-y :scroll-top="cityPageNextScrollTop"
					scroll-with-animation @scroll="handlePageDataScroll">
					<view class="city-selector-list-inner">
						<view class="city-selector-list-part" v-for="(item,pindex) in cityPageData"
							:key="item.first_char">
							<view class="city-selector-list-part-title" :class="{'is-show': filterKeyword == ''}"
								:id="'city-selector-index-'+item.first_char_key">{{ item.first_char }}</view>
							<view class="city-selector-list-part-content">
								<view class="city-selector-list-part-item"
									:class="{'is-actived': city.isActived,'is-hidden': city.show === false}"
									v-for="(city,cindex) in item.children" :key="city.id"
									@click="handleItem(city,cindex,pindex)">{{ city.name }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="city-selector-abc-box" :class="{'is-show': filterKeyword == ''}"
					@touchmove.stop.prevent="handleMove">
					<view class="city-selector-abc-list">
						<view class="city-selector-abc-item" v-for="(item,index) in indexABC" :key="index"
							@click="tapABC(item,index)">{{ item.key }}</view>
					</view>
				</view>
				<view class="city-selector-abc-indicator" v-if="indexTips">{{ indexTips }}</view>
			</view>
			<view class="city-selector-list-box" v-else @touchmove.stop.prevent="handleMove">
				<view class="city-selector-list-box--none"> -- 暂无数据 -- </view>
			</view>
			<view class="city-selector-selected" v-if="selectedData.length > 0 && multiple">
				<view class="city-selector-selected-inner">
					<view class="city-selector-selected-title">已选</view>
					<scroll-view class="city-selector-selected-scroll" scroll-x scroll-with-animation
						:scroll-left="citySelectedScrollLeft">
						<view class="city-selector-selected-tag"
							:id="index === selectedData.length-1 ? 'city-selector-selected-last-tag' : ''"
							v-for="(item,index) in selectedData" :key="index" @click="handleDeleteSelect(item,index)">
							<view class="city-selector-selected-tag-inner">{{ item.name }}</view>
						</view>
					</scroll-view>
				</view>
				<view class="city-selector-selected-button" @click="handleSave()"><text>保存</text><text
						v-if="multipleLimit > 0"
						@touchmove.stop.prevent="handleMove">({{ selectedData.length || 0 }}/{{ multipleLimit }})</text>
				</view>
			</view>
			<view class="city-selector-close" @click="handleClose()" @touchmove.stop.prevent="handleMove"></view>
		</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		ref,
		watch,
		unref,
		nextTick
	} from 'vue'

	import {
		dt_city
	} from './city_data'
	import {
		createCityData,
		createCityABC,
		showModal,
		getLocalionInfo
	} from './utils'
	import {
		deepClone
	} from './utils'
	import Navbar from '../Navbar/Navbar.vue'

	export default defineComponent({
		name: 'DaCitySelector',
		props: {
			/**
			 * 是否显示
			 */
			visible: {
				type: Boolean,
				default: false,
			},
			/**
			 * 城市数据，如果为空则使用组件自带的城市数据
			 * 数据格式为：[{first_char: '字母',[{id: '城市Code',name: '城市名称',sname: '城市缩写',pinyin: '城市名称拼音'}]}]
			 */
			cityData: {
				type: Array,
			},
			/**
			 * 默认已选数据
			 */
			cityValue: {
				type: [String, Number, Array],
			},
			/**
			 * 是否多选
			 */
			multiple: {
				type: Boolean,
				default: false,
			},
			/**
			 * 多选个数限制，0为不限制
			 */
			multipleLimit: {
				type: Number,
				default: 0,
			},
			/**
			 * 主题色
			 */
			themeColor: {
				type: String,
				default: '#17B2B4',
			},
			/**
			 * 搜索提示文本
			 */
			placeholder: {
				type: String,
				default: '请输入城市名称/拼音',
			},
			/**
			 * 是否显示定位城市，不支持H5
			 */
			showLocate: {
				type: Boolean,
				default: true,
			},
			/**
			 * 地图key
			 * key申请地址：https://lbs.qq.com/dev/console/key/add
			 * 如有不懂可看地图指南：https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview
			 * 通常 showLocate 为 true 时用的到，主要用来转换经纬度为城市信息
			 */
			mapKey: {
				type: String,
				default: '',
			},
		},
		emits: ['close', 'confirm'],
		setup(props, {
			emit
		}) {
			const visibleRef = ref(false)
			const visibleAni = ref(false)

			const cityPageData = ref([])
			const cityPageHegith = ref(0)
			const cityPageDeltaY = ref(0)
			const cityPageNextScrollTop = ref(0)
			const cityPageItemHegith = ref(0)
			const indexTips = ref('')
			const indexABC = ref([])
			const indexABCSize = ref(0)
			const indexActive = ref(0)
			const filterBoxHeight = ref(0)
			const citySelectedScrollLen = ref(0)
			const citySelectedScrollLeft = ref(0)

			const filterKeyword = ref('') // 搜索值
			const selectedData = ref([]) // 已选项
			const localCity = ref('') // 当前城市

			/**
			 * 初始化已选数据
			 */
			function initData() {
				if (props.cityData?.length) {
					cityPageData.value = deepClone(props.cityData)
				} else {
					cityPageData.value = createCityData(dt_city)
				}

				cityPageData.value = checkSelectedData(cityPageData.value)

				indexABC.value = createCityABC(cityPageData.value)
				indexABCSize.value = indexABC.value.reduce((total, item) => {
					return total + item.size
				}, 0)

				if (props.showLocate) {
					if (props.mapKey) {
						checkGPSService()
					} else {
						// #ifndef H5
						showModal('地图Key不存在，请填写 mapKey 字段')
						// #endif
					}
				}
			}

			/**
			 * 检查已选项
			 */
			function checkSelectedData(data) {
				if (!props.cityValue && props.cityValue !== 0) {
					return data
				}

				if (!Array.isArray(data) || data.length === 0) {
					return []
				}

				let cv
				if (props.multiple) {
					cv = Array.isArray(props.cityValue) ? props.cityValue : []

					if (cv.length === 0) {
						return data
					}

					selectedData.value = []
					if (cv.length > props.multipleLimit) {
						cv = cv.slice(0, props.multipleLimit)
					}
				} else {
					cv = Array.isArray(props.cityValue) ? props.cityValue[0] : props.cityValue
				}

				for (let i = 0; i < data.length; i++) {
					const item = data[i]
					if (!item.children || item.children.length === 0) {
						continue
					}

					for (let i = 0; i < item.children.length; i++) {
						const city = item.children[i]
						if (props.multiple) {
							if (cv.includes(city.id)) {
								selectedData.value.push(city)
								city.isActived = true
							}
						} else {
							if (cv === city.id) {
								city.isActived = true
							}
						}
					}
				}

				return data
			}

			function getCSQI(self) {
				if (self) {
					return uni.createSelectorQuery().in(self)
				}
				return null
			}

			/**
			 * 点击关闭
			 */
			function handleClose() {
				visibleRef.value = false
				selectedData.value = []
				filterKeyword.value = ''
				// localCity.value = ''

				if (cityPageData.value?.length) {
					cityPageData.value.forEach(k => {
						if (k.children?.length) {
							k.children.forEach(ck => {
								ck.isActived = false
								ck.show = true
							})
						}
					})
				}

				emit('close', null)
			}

			/**
			 * 清理滚动
			 */
			function handleMove() {
				return false
			}

			/**
			 * 输入框筛选
			 * @param e
			 */
			function bindFilterKeyword(e) {
				const {
					value
				} = e.detail
				filterKeyword.value = value

				cityPageData.value.forEach(k => {
					filterListData(value, k)
				})
			}

			/**
			 * 过滤数据列表
			 * @param key  输入内容
			 * @param data 当前列表项
			 */
			function filterListData(key, item) {
				if (item.children?.length) {
					item.children.forEach(k => {
						if (!k.py) {
							k.py = ''
							k.pinyinArr = k.pinyin?.split(' ')
							if (k.pinyinArr?.length) {
								k.pinyinArr.forEach(pa => {
									k.py += pa[0]
								})
							}
						}
						if (k.name.indexOf(key) > -1 || k.pinyin.indexOf(key) === 0 || k.py.indexOf(
							key) === 0) {
							k.show = true
						} else {
							k.show = false
						}
					})
					if (item.children.some(k => k.show)) {
						item.show = true
					} else {
						item.show = false
					}
				}
			}

			/**
			 * 获取头部盒子元素
			 */
			function getFilterHeight(self = undefined) {
				try {
					getCSQI(self).select('#city-selector-filter-box').boundingClientRect(rect => {
						filterBoxHeight.value = rect?.height || 0
					}).exec()
				} catch (e) {
					console.warn('DaCitySelector: get filter height fail.', e)
				}
			}

			/**
			 * 列表滚动回调
			 * @param e
			 */
			function handlePageDataScroll(e) {
				if (e.detail.scrollHeight > cityPageHegith.value) {
					cityPageHegith.value = e.detail.scrollHeight || 0
				}
				if (cityPageItemHegith.value <= 0) {
					cityPageItemHegith.value = Math.floor(cityPageHegith.value / indexABCSize.value)
				}
				const eds = e.detail.scrollTop || 0
				cityPageDeltaY.value = eds
			}

			/**
			 * 点击字母
			 */
			function tapABC(item, index) {
				if (filterBoxHeight.value <= 0) {
					getFilterHeight(this)
				}

				const indexId = `#city-selector-index-${item.key?.toLocaleLowerCase()}`
				try {
					getCSQI(this).select(indexId).boundingClientRect(rect => {
						if (rect === null) return false

						cityPageNextScrollTop.value = cityPageDeltaY.value + rect.top - filterBoxHeight
							.value

						activeABC(item.key, index)
					}).exec()
				} catch (e) {
					console.warn('DaCitySelector: check abc list fail.', e)
				}
			}

			/**
			 * 激活当前字母
			 * @param key
			 * @param index
			 */
			function activeABC(key, index) {
				indexActive.value = index
				indexTips.value = key === 'hot' ? '★' : key
				setTimeout(() => {
					indexTips.value = ''
				}, 1200)
			}

			/**
			 * 点击当前列表项
			 */
			function handleItem(item, _currentIndex, _parentIndex) {
				if (!props.multiple) {
					item.isActived = true
					emit('confirm', item)
					return
				}

				const hasIndex = selectedData.value.findIndex(k => k.id === item.id)
				if (hasIndex > -1) {
					item.isActived = false
					selectedData.value.splice(hasIndex, 1)
				} else {
					if (props.multipleLimit > 0 && selectedData.value.length >= props.multipleLimit) {
						uni.showToast({
							title: `限制选择${props.multipleLimit}项`,
							duration: 1200,
							icon: 'none'
						})
						return
					}
					item.isActived = true
					selectedData.value.push(item)
				}

				checkSelectedTags(this)
			}

			/**
			 * 删除已选项
			 */
			function handleDeleteSelect(item, index) {
				for (let i = 0; i < cityPageData.value.length; i++) {
					const k = cityPageData.value[i]
					if (k.children.length) {
						for (let j = 0; j < k.children.length; j++) {
							const c = k.children[j]
							if (item.id === c.id) {
								c.isActived = false
								break
							}
						}
					}
				}
				selectedData.value.splice(index, 1)

				checkSelectedTags(this)
			}

			/**
			 * 获取已选的末项
			 */
			function checkSelectedTags(self = undefined) {
				if (citySelectedScrollLen.value === selectedData.value.length) {
					return
				}

				citySelectedScrollLen.value = selectedData.value.length

				try {
					getCSQI(self).select('#city-selector-selected-last-tag').boundingClientRect(rect => {
						citySelectedScrollLeft.value = Math.floor((rect?.left || 0) + (rect?.width || 0))
					}).exec()
				} catch (e) {
					console.warn('DaCitySelector: check selected tags fail.', e)
				}
			}

			/**
			 * 保存已选
			 */
			function handleSave() {
				const res = selectedData.value.map(k => {
					return {
						id: k.id,
						name: k.name,
					}
				})
				emit('confirm', res)
			}

			/**
			 * 判断GPS是否开启，目前只有微信小程序支持
			 */
			function checkGPSService() {
				// #ifdef MP-WEIXIN
				uni.getSystemInfo({
					success(res) {
						const locationEnabled = res.locationEnabled
						const locationAuthorized = res.locationAuthorized
						// 判断手机是否开启定位服务、是否授权微信定位服务
						if (locationEnabled === false || locationAuthorized === false) {
							showModal('请打开定位服务功能')
						} else {
							checkMPLocation()
						}
					},
					fail(err) {
						console.error('DaCitySelector: getSystemInfo fail', err)
						showModal('获取位置信息失败')
					},
				})
				// #endif

				// #ifndef MP-WEIXIN | H5
				checkMPLocation()
				// #endif
			}

			/**
			 * 判断小程序是否授权位置信息
			 */
			function checkMPLocation() {
				uni.getSetting({
					success(res) {
						const scopeUserLocation = res.authSetting['scope.userLocation']
						if (scopeUserLocation) {
							// 已授权位置信息
							getCityInfo()
						} else {
							showModal('未授权位置信息')
						}
					},
					fail(err) {
						console.error('DaCitySelector: getSetting fail', err)
						showModal('获取位置信息失败')
					},
				})
			}

			/**
			 * 获取当前位置
			 */
			function getCityInfo() {
				if (!props.mapKey) {
					console.error('DaCitySelector: mapKey cannot be empty')
					return
				}

				getLocalionInfo(props.mapKey).then(res => {
						localCity.value = res
					})
					.catch(() => {
						showModal('获取位置信息失败')
					})
			}

			/**
			 * 重新定位
			 */
			function handleRepositioning() {
				if (!props.showLocate) return

				// #ifdef H5
				showModal('不支持网页获取位置信息')
				// #endif

				checkGPSService()
			}

			watch(() => props.visible,
				(v) => {
					visibleRef.value = v
				})

			watch(() => unref(visibleRef),
				(v) => {
					setTimeout(() => {
						visibleAni.value = v

						if (v) {
							nextTick(() => {
								initData()
							})
						}
					}, 150)
				})

			return {
				visibleRef,
				visibleAni,

				localCity,
				cityPageData,
				cityPageNextScrollTop,
				indexTips,
				indexABC,
				indexActive,
				handleRepositioning,
				tapABC,
				filterKeyword,
				bindFilterKeyword,
				citySelectedScrollLeft,
				selectedData,
				handlePageDataScroll,
				handleItem,
				handleDeleteSelect,
				handleSave,
				handleClose,
				handleMove,
			}
		},
	})
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		/* Project id  */
		src: url('data:application/octet-stream;base64,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') format('truetype');
	}

	.icon-guanbi::before {
		content: '\e607';
	}

	.icon-fanhui1::before {
		content: '\e6ff';
	}

	.icon-dingwei::before {
		content: '\e627';
	}

	.icon-sousuo::before {
		content: '\e7d2';
	}

	.city-selector {
		&-wrap {
			position: relative;
		}

		&-box {
			position: fixed;
			top: var(--window-top, 0px);
			left: 0;
			z-index: 999;
			display: flex;
			flex-direction: column;
			width: 100vw;
			height: calc(100vh - var(--window-top, 0px));
			padding-bottom: var(--window-bottom, 0px);
			overflow: hidden;
			line-height: 1;
			visibility: hidden;
			background: #f4f4f4;
			opacity: 0;
			transition: all 0.15s ease-in-out;
			transform: translateY(30%);

			&.is-show {
				visibility: visible;
				opacity: 1;
				transform: translateY(0);
			}
		}

		&-filter {
			&-box {
				flex-shrink: 0;
				width: 100%;
				overflow: hidden;
			}
		}

		&-search {
			&-box {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100rpx;
				padding: 0 24rpx;
				margin: auto;
				margin-left: 64rpx;
				white-space: nowrap;
				background: #f5f5f5;
			}

			&-input {
				display: flex;
				flex-grow: 1;
				align-items: center;
				height: 72rpx;
				padding: 0 20rpx;
				overflow: hidden;
				background: #fff;
				border-radius: 16rpx;

				&::before {
					margin-right: 10rpx;
					/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
					font-family: 'iconfont' !important;
					font-size: 30rpx;
					font-style: normal;
					color: #999;
					content: '\e7d2';
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}

				&-inner {
					width: 100%;
					height: 100%;
					padding: 0;
					margin: 0;
					font-size: 28rpx;
					letter-spacing: 2rpx;
					border: none;

					.-p,
					&.-p {
						color: #999;
					}

					&::after {
						display: none;
					}
				}
			}
		}

		&-local {
			&-box {
				display: flex;
				align-items: center;
				padding: 30rpx;
				margin-bottom: 16rpx;
				background: #fff;
			}

			&-info {
				display: flex;
				flex-grow: 1;
				align-items: center;
				font-size: 30rpx;

				&-label {
					flex-shrink: 0;
					margin-right: 6rpx;
				}

				&-content {
					flex-grow: 1;
				}
			}

			&-button {
				display: flex;
				flex-shrink: 0;
				align-items: center;
				white-space: nowrap;

				&-icon {
					&::after {
						position: relative;
						z-index: 1;
						margin-left: 10rpx;
						/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
						font-family: 'iconfont' !important;
						font-size: 30rpx;
						font-style: normal;
						color: var(--theme-color);
						content: '\e627';
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
					}
				}

				&-text {
					margin-left: 6rpx;
					font-size: 30rpx;
				}
			}
		}

		&-list {
			&-box {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				background: #fff;

				&--none {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					font-size: 12px;
					color: #999;
				}
			}

			&-scroll {
				position: relative;
				z-index: 1;
				width: 100%;
				height: 100%;
			}

			&-inner {
				position: relative;
			}

			&-part {
				--part-item-height: 80rpx;

				&-title {
					display: none;
					align-items: center;
					height: var(--part-item-height);
					padding: 0 30rpx;
					margin: auto;
					font-size: 36rpx;
					font-weight: bold;
					color: #232323;
					text-transform: uppercase;

					&.is-show {
						display: flex;
					}
				}

				&-content {
					position: relative;
					padding: 0 80rpx 0 30rpx;
				}

				&-item {
					position: relative;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					width: 100%;
					height: var(--part-item-height);
					overflow: hidden;
					font-size: 28rpx;
					color: #232323;
					background: #fff;
					border-bottom: 1rpx solid #eee;

					&.is-actived {
						color: var(--theme-color);
					}

					&.is-hidden {
						display: none;
					}
				}
			}
		}

		&-abc {
			&-box {
				display: none;

				&.is-show {
					display: block;
				}
			}

			&-list {
				position: absolute;
				top: 50%;
				right: 2rpx;
				z-index: 3;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 60rpx;
				padding: 0;
				margin: 0;
				overflow: hidden;
				color: #232323;
				transform: translateY(-50%);
			}

			&-item {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 4rpx 0;
				font-size: 24rpx;
				color: var(--theme-color);
				user-select: none;
			}

			&-indicator {
				position: fixed;
				top: calc(50% - 50rpx);
				left: calc(50% - 50rpx);
				z-index: 1003;
				width: 100rpx;
				height: 100rpx;
				font-size: 48rpx;
				line-height: 100rpx;
				color: #fff;
				text-align: center;
				background-color: var(--theme-color);
				border-radius: 10rpx;
				transition: all 0.15s;
			}
		}

		&-selected {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 3;
			padding: 30rpx 40rpx;
			background: #fff;

			&-inner {
				display: flex;
				align-items: center;
				width: 100%;
				overflow: hidden;
			}

			&-title {
				flex-shrink: 0;
				padding-right: 30rpx;
				margin-right: 30rpx;
				white-space: nowrap;
				border-right: 1px solid #eee;
			}

			&-scroll {
				flex-grow: 1;
				width: calc(100% - 126rpx);
				overflow: hidden;
				white-space: nowrap;
			}

			&-tag {
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 16rpx 32rpx;
				margin-right: 12rpx;
				overflow: hidden;
				font-size: 24rpx;
				white-space: nowrap;
				border-radius: 64rpx;

				&-inner {
					position: relative;
					z-index: 1;
					display: flex;
					align-items: center;
					color: var(--theme-color);
				}

				&::before {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					z-index: 0;
					content: '';
					background: var(--theme-color);
					opacity: 0.1;
				}

				&::after {
					position: relative;
					z-index: 1;
					margin-left: 10rpx;
					/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
					font-family: 'iconfont' !important;
					font-size: 24rpx;
					font-style: normal;
					color: var(--theme-color);
					content: '\e607';
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					transform: scale(0.8);
				}
			}

			&-button {
				display: flex;
				flex-shrink: 0;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 80rpx;
				margin-top: 30rpx;
				overflow: hidden;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				white-space: nowrap;
				background: var(--theme-color);
				border-radius: 16rpx;

				&:hover {
					opacity: 0.8;
				}
			}
		}

		&-close {
			position: absolute;
			top: 30rpx;
			left: 20rpx;
			z-index: 3;
			width: 40rpx;
			height: 40rpx;

			&::after {
				/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
				font-family: 'iconfont' !important;
				font-size: 40rpx;
				font-style: normal;
				color: #999;
				content: '\e6ff';
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		}
	}
</style>